<template>
  <div class="left-card">
    <m-card title="各区经济收益">
      <v-chart ref="vChart" :option="option" :autoresize="true" />
    </m-card>
  </div>
</template>
<script setup>
import { ref, onMounted,onBeforeUnmount, nextTick } from "vue"
import * as echarts from "echarts"
import mCard from "@/components/mCard/index.vue"
import VChart from "vue-echarts"
const option = ref({
  title: {
    text: "亿元",
    left: "5%",
    top: "8%",
    textStyle: {
      color: "#D3F8F2",
      fontSize: 8,
    },
  },
  grid: {
    left: "12%",
    top: "25%",
    width: "82%",
    height: "55%",
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
      shadowStyle: { opacity: 0.2 },
    },
    backgroundColor: "rgba(0,0,0,1)",
    borderWidth: 1,
    borderColor: "#999999",
    textStyle: {
      color: "#ffffff",
      fontSize: 10,
    },
  },
  color: ["#6BC7F6"],
  xAxis: [
    {
      type: "category",

      axisLine: {
        show: false,
        lineStyle: {
          color: "#435459",
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        color: "#ffffff",
        fontSize: 10,
        interval: 0,
        padding: [0, 0, 0, 0],
      },
      data: ["南山区", "天河区", "福田区", "龙岗区", "宝安区"],
    },
    {
      axisLine: {
        show: false,
        lineStyle: {
          color: "rgba(0,0,0,0)",
        },
      },
      data: [],
    },
  ],
  yAxis: {
    type: "value",

    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    splitLine: {
      show: false,
    },
    axisLabel: {
      color: "#8B9EA4",
      fontSize: 9,
    },
  },
  series: [
    {
      name: "",
      type: "pictorialBar",
      symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
      label: {
        show: true,
        position: "top",
        distance: 10,
        color: "#ffffff",
        fontSize: 10,
      },

      data: [
        {
          value: 8000,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(64, 175, 255, 1)" },
              { offset: 1, color: "rgba(64, 175, 255, 0.10)" },
            ]),
          },
        },
        {
          value: 7500,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(25, 255, 198, 1)" },
              { offset: 1, color: "rgba(0, 204, 187, 0.10)" },
            ]),
          },
        },
        {
          value: 6000,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(64, 175, 255, 1)" },
              { offset: 1, color: "rgba(64, 175, 255, 0.10)" },
            ]),
          },
        },
        {
          value: 5800,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(25, 255, 198, 1)" },
              { offset: 1, color: "rgba(0, 204, 187, 0.10)" },
            ]),
          },
        },
        {
          value: 5000,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(64, 175, 255, 1)" },
              { offset: 1, color: "rgba(64, 175, 255, 0.10)" },
            ]),
          },
        },
      ],
    },
    {
      name: "",
      type: "custom",
      z: 3,
      xAxisIndex: 1,
      renderItem: (params, api) => {
        const categoryIndex = api.value(0)

        const categoryData = api.value(1)

        const basicsCoord = api.coord([categoryIndex, categoryData])

        const topBasicsYAxis = basicsCoord[1]

        const basicsXAxis = basicsCoord[0]
        return {
          type: "image",
          style: {
            x: basicsXAxis - 5,
            y: topBasicsYAxis - 5,
            width: 10,
            height: 10,
            image:
              "",
          },
        }
      },
      data: [8000, 7500, 6000, 5800, 5000],
    },
  ],
})


</script>
<style lang="scss"></style>
